<template>
  <div class="bg-shadow">
    <div class="add-coin">
      <div class="header flex-center">
        <span>导出筛选</span>
        <i class="iconfont iconguanbi" @click="$emit('cancel')"></i>
      </div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        class="form"
        label-width="150px"
        label-position="left"
        size="small"
      >
        <el-form-item label="开始时间" prop="start_time">
          <el-date-picker
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            v-model="form.start_time"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end_time">
          <el-date-picker
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            v-model="form.end_time"
          ></el-date-picker>
        </el-form-item>
        <div class="flex-center">
          <el-button size="small" type="primary" @click="submit" :disabled="buttonDisabled">确定</el-button>
          <el-button size="small" @click="$emit('cancel')">取消</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: ["params", "fnc"],
  data() {
    return {
      buttonDisabled: false,
      form: {
        start_time: null,
        end_time: null
      },
      rules: {
        start_time: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        end_time: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    async submit() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          this.buttonDisabled = true;
          const res = await this.fnc({
            ...this.params,
            ...this.form,
            excel: 1
          });
          if (res.code === 1) {
            if (!res.data) {
              this.buttonDisabled = false;
              return this.$notify.success({
                title: "提示",
                message: "导出数据为空"
              });
            }

            let filename = `交易记录`;
            let url = `${res.data.path}`;

            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", filename);
            document.body.appendChild(link);
            link.click();
            this.$emit("success");
          }
          this.buttonDisabled = false;
        } else {
          this.$notify.warning({
            title: "提示",
            message: "请检查参数！"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.bg-shadow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.3);
  z-index: 1001;
}

.add-coin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  min-width: 600px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;

  .header {
    margin-bottom: 10px;
    padding: 15px 0;

    span {
      font-weight: 600;
      font-size: 18px;
    }

    i {
      position: absolute;
      right: 10px;
      font-size: 20px;
      cursor: pointer;
      transition: 0.2s;
    }

    i:hover {
      color: #409eff;
    }
  }

  .form {
    padding: 20px 50px;
    max-height: 600px;
    overflow-y: scroll;

    .tab-item {
      position: relative;

      label {
        position: absolute;
        top: 55px;
      }
    }

    .el-input-number {
      width: 100%;
    }

    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .el-tabs__item {
      padding: 0 40px;
    }

    .el-upload__tip {
      line-height: 20px;
      color: #d93a49;
    }

    .scaleIMGdisabled {
      .el-upload--picture-card {
        display: none;
      }
    }
  }
}
</style>
